<template>
    <div>
        <el-collapse accordion>
      <el-collapse-item>
        <div slot="title" class="wz">! 温馨提示</div>
        <div class="box_1">
          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
        </div>
        <div class="box_1">
          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
        </div>
      </el-collapse-item>
    </el-collapse>

    <div class="box_2">
        <el-button type="primary" class="btn_1" @click="tanq()">添 加</el-button>
    </div>

    <div class="box_4">
        <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="ID" width="230">
            <template slot-scope="scope">
              <div>
                {{ scope.row.id }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="内容" width="250">
            <template slot-scope="scope">
             <div>
                {{scope.row.contents}}
             </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="标题" width="250">
            <template slot-scope="scope">
              <div>
                {{ scope.row.title}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="时间" width="250">
            <template slot-scope="scope">
              <div>
                {{ scope.row.bytime}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="danger" @click="shanchu(scope.row.id)"
                  >删除</el-button
                >
                <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="primary" @click="xiangqing(scope.row.id)">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
       <div class="boxfyq">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-size="queryInfo.pagesize"
          :page-sizes="[1, 2, 5, 10]"
          layout="total, sizes, prev, pager, next ,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div style="height:1vw;"></div>
        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="内容">
            <el-input v-model="form.contents"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-input v-model="form.bytime"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false" type="warning"
            >取 消</el-button
          >
          <el-button type="primary" @click="saveEdit(form.id)">确 定</el-button>
        </span>
      </el-dialog>
     <!-- 详情弹出框 -->
     <el-dialog title="详情" :visible.sync="editVisibleqq" width="30%">
          <div class="box_7"><span class="spou">ID</span> {{sdd.id}}</div>
          <div class="box_7"><span class="spou">内容</span> {{sdd.contents}}</div>
          <div class="box_7"><span class="spou">标题</span> {{sdd.title}}</div>
          <div class="box_7"><span class="spou">时间</span> {{sdd.bytime}}</div>
      </el-dialog>
       <!-- 添加弹出框 -->
     <el-dialog title="添加" :visible.sync="editVisibleqqa" width="90%" >
        <span class="spq">公告的内容:</span> <div class="box_3"><el-input v-model="input1" placeholder="请输入内容"></el-input></div>
        <span class="spq">公告的标题:</span> <div class="box_3"><el-input v-model="input2" placeholder="请输入内容"></el-input></div>
        <span class="spq">公告的时间:</span><div class="box_3"><el-input v-model="input3" placeholder="请输入内容"></el-input></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisibleqqa = false" type="warning"
            >取 消</el-button
          >
          <el-button type="primary" @click="tianjia()">添 加</el-button>
        </span>
      </el-dialog>
    </div>
    </div>
</template>

<script>
import {postggtj,postgglb,postggsc,postggxq} from '../feng'
export default{
    data() {
        return {
            editVisible:false,
            editVisibleqq:false,
            editVisibleqqa:false,
            form:{
                contents:'',
                title:'',
                bytime:''
            },
            input1:'',
            input2:'',
            input3:'',
            tableData:[],
            sdd:[],
             // 总条数
      total: 0,
      //参数
      queryInfo: {
        query: "",
        // 当前页数
        pagenum: 1,
        // 显示一页多少条数据
        pagesize: 10,
      },
        }
    },
    created(){
      this.aqq()
    },
    methods:{
        tanq(){
            this.editVisibleqqa = true;
        },
         //详情
    xiangqing(i){
      this.editVisibleqq = true;
      let gtt = {
        id:i
      }
      postggxq(gtt).then(res=>{
        console.log(res.data);
        this.sdd=res.data
      })
    },
        //编辑
        handleEdit(index, row) {
      console.log(index, row);
      this.editVisible = true;
      this.form = row;
    },
    //修改
    saveEdit(i) {
      // console.log(this.form.type)
      this.form.type = `${this.form.type}`;
      let arr = {
        contents: this.form.contents,
        title: this.form.title,
        bytime: this.form.bytime,
        id:i
      };
      console.log(this.form.type);
      this.editVisible = false;
      postggtj(arr).then((res) => {
        if(res.code==0){
         this.$message({
          message: "恭喜你，修改成功",
          type: "success",
        });
        }else {
            this.$message({
            message: `警告,${res.msg}`,
            type: "warning",
          });
        }
       
        this.aqq();
        console.log(res);
      });
    },
        //删除
        shanchu(i) {
      let ass = {
        id: i,
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            postggsc(ass).then((res) => {
            console.log(res);
            this.aqq();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
        aqq() {
      let add = {
        page: this.queryInfo.pagenum,
        pagelimit: this.queryInfo.pagesize,
      };
      postgglb(add).then((res) => {
        console.log(res.data.data);
        this.total = res.data.pagecount;
        this.tableData = res.data.data;
      });
    },
        handleSizeChange(newsize) {
      //这里conso 选中第几页 最新的值
      console.log(newsize);
      //最新的条数（newsize）赋值给 动态的 pagesie
      this.queryInfo.pagesize = newsize;
      //获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求方法
      this.aqq();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      //把最新的页码（newPage）赋值给 动态的 pagenum
      this.queryInfo.pagenum = newPage;
      //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求方法
      this.aqq();
    },
       //添加
        tianjia(){
            let obj ={
                contents:this.input1,
                title:this.input2,
                bytime:this.input3
            }
        postggtj(obj).then((res) => {
        console.log(res);
        this.aqq();
        if (res.code == 0) {
          this.$message({
            message: "恭喜你，添加成功",
            type: "success",
          });
        } else {
          this.$message({
            message: `警告,${res.msg}`,
            type: "warning",
          });
        }
      });
        }
    }
}
</script>

<style scoped>
.boxfyq{
  margin-top: 1vw;
}
.box_4{
    margin-top: 1vw;
    background: #fff;
}
.btn_1{
    margin: 1vw;
}
.box_3{
    float: left;
    margin-top: 1.3vw;
    margin-left: 1vw;
}
.spq{
    margin-left: 1vw;
    float: left;
    line-height: 5.2vw;
}
.box_2{
    height: 5vw;
    background: #fff;
}
.box_1{
    margin-left: 1vw;
}
.wz {
  margin-left: 1vw;
}
</style>